<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center qiyeInfo_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub qiyeInfo_fd0_0'>
          <view class='flex flex-wrap align-center qiyeInfo_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  qiyeInfo_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='qiyeInfo_fd0_0_c1_c0'>企业信息</text>
          </view>
          <view class='flex flex-wrap align-center justify-end qiyeInfo_fd0_0_c0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/grzx/zhipaiUser/zhipaiUser?aid=${aid}`">
            <text v-if="company_id">指派他人</text>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout qiyeInfo_flex_1">
        <view class='flex flex-wrap align-center justify-between qiyeInfo_fd1_0'>
          <text>企业名称</text>
          <benben-input class='qiyeInfo_fd1_0_c1' type="text" :placeholder="`请输入名称`" confirm-type="done" :maxlength="10"
            v-model="mingcheng" :adjust-position='true' placeholder-style="color:#999;font-size:28rpx" />
        </view>
        <view class='flex flex-wrap align-center justify-between qiyeInfo_fd1_0'>
          <text>企业电话</text>
          <benben-input class='qiyeInfo_fd1_0_c1' type="number" :placeholder="`请输入`" confirm-type="done" :maxlength="11"
            v-model="qiyedianhua" :adjust-position='true' placeholder-style="color:#999;font-size:28rpx" />
        </view>
        <view class='flex flex-wrap align-center justify-between qiyeInfo_fd1_0'>
          <text>企业头像</text>
          <benben-image-upload :path.sync="logo" :img-id.sync="logo" :is-cropping="false" :is-show-clean="true"
            class="upload position-relative">
            <text v-if="logo != ''" data-type="clean"
              class='fu-iconfont2 position-absolute qiyeInfo_fd1_1_c1_icon'>&#xE8E7;</text>
            <image class=" qiyeInfo_fd1_1_c1_image" mode="aspectFill" :src="logo ? logo : STATIC_URL+'178.jpg'">
            </image>
          </benben-image-upload>
        </view>
        <view class='flex align-center justify-between qiyeInfo_fd1_0' @click.stop="chooseMap">
          <view style="width: 240rpx;">企业地址</view>
          <view class='flex align-center qiyeInfo_fd1_2_c1'>
            <text>{{city || '请选择'}}</text>
            <text class='fu-iconfont2  qiyeInfo_fd1_2_c1_c1'>&#xe7f2;</text>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch justify-between qiyeInfo_fd1_0'>
          <text>详情地址</text>
          <view class='flex flex-wrap qiyeInfo_fd1_3_c1'>
            <textarea class='flex qiyeInfo_input_fd1_3_c1' :placeholder="'请输入'" :adjust-position='true' :maxlength="240"
              :show-num='true' placeholder-style="color:#999;font-size:28rpx" v-model="address" />
            <template>
              <view class='flex flex justify-end qiyeInfo_numberfd1_3_c1_c0'>
                <text>{{address.length}}</text>
                <text>/</text>
                <text>240</text>
              </view>
            </template>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch justify-between qiyeInfo_fd1_4'>
          <text>企业介绍</text>
          <view class='flex flex-wrap qiyeInfo_fd1_4_c1'>
            <textarea class='flex qiyeInfo_input_fd1_3_c1' :placeholder="'请输入'" :adjust-position='true' :maxlength="240"
              :show-num='true' placeholder-style="color:#999;font-size:28rpx" v-model="jieshao" />
            <template>
              <view class='flex flex justify-end qiyeInfo_numberfd1_3_c1_c0'>
                <text>{{jieshao.length}}</text>
                <text>/</text>
                <text>240</text>
              </view>
            </template>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch justify-between qiyeInfo_fd1_0'>
          <text>企业图片</text>
          <benben-images-upload ref="benbenImagesUploadfd1_5_c1" :img-list.sync="images" :img-ids.sync="imagesId"
            :is-show-tips='true' :maxlength="9">
            <template #content="{ num, maxlength, isShow, imgList }">
              <view class="flex flex-wrap align-start flex qiyeInfo_fd1_5_c1">

                <view v-for="(image, index) in imgList" :key="index" class='flex position-relative qiyeInfo_fd1_5_c10'>
                  <text class='fu-iconfont2 position-absolute qiyeInfo_fd1_1_c1_icon'
                    @tap.stop="$refs.benbenImagesUploadfd1_5_c1.delImage(index)">&#xE8E7;</text>
                  <image class='qiyeInfo_fd1_5_c101' @tap.stop="$refs.benbenImagesUploadfd1_5_c1.previewImage(index)"
                    mode="aspectFill" :src='image'></image>
                </view>

                <image class='qiyeInfo_fd1_5_c11' @tap.stop="$refs.benbenImagesUploadfd1_5_c1.manyChooseImage()"
                  v-if="isShow" mode="aspectFill" :src='STATIC_URL+"178.jpg"'></image>

              </view>
            </template>
          </benben-images-upload>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch justify-between qiyeInfo_fd1_0'
          @click.stop="choosePop">
          <view class='flex flex-wrap align-center justify-between'>
            <text>业务范围</text>
            <image class='qiyeInfo_fd1_6_c0_c1' mode="aspectFit" :src='STATIC_URL+"173.png"'></image>
          </view>
          <view class='flex flex-wrap align-center'>
            <view class='flex flex-wrap align-center qiyeInfo_fd1_6_c1_c0' v-for="(item,index) in yewuList"
              :key="index">
              <text>{{item}}</text>
              <image @click.stop="delYewu(item,index)" class='qiyeInfo_fd1_6_c1_c0_c1' mode="aspectFit"
                :src='STATIC_URL+"174.png"'></image>
            </view>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch justify-between qiyeInfo_fd1_0'>
          <view class='flex flex-wrap align-center justify-between' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/homePage/addProject/addProject`">
            <text>产品展示</text>
            <image class='qiyeInfo_fd1_6_c0_c1' mode="aspectFit" :src='STATIC_URL+"173.png"'></image>
          </view>
          <view class='flex flex-wrap align-center justify-between qiyeInfo_fd1_7_c1'
            v-for="(item,index) in productList" :key="index">
            <view class='flex flex-wrap align-center'>
              <image class='qiyeInfo_fd1_7_c1_c0_c0' mode="aspectFill" :src='item.thumb'></image>
              <view>
                <view class="text-lg">{{item.name}}</view>
                <view class="text-sm text-999 margin-top-sm">{{item.jieshao}}</view>
              </view>

            </view>
            <image class='qiyeInfo_fd1_7_c1_c1' @click.stop="delProduct(item,index)" mode="aspectFit"
              :src='STATIC_URL+"175.png"'></image>
          </view>
        </view>
        <button class='qiyeInfo_fd1_8' @click.stop="submit">提交</button>
      </view>

      <!---flex布局flex布局结束-->


    </view>
    <benben-popup v-model="isShow" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
      <view class='flex flex-wrap align-center dongDetail_fd2_3'>
        <view class='flex align-center flex-sub dongDetail_fd2_3_c0'>
          <image class='dongDetail_fd2_3_c0_c0' mode="aspectFit" :src='STATIC_URL+"162.png"'></image>
          <input cursor-spacing="50" class='dongDetail_fd2_3_c0_c1' type=" text" :placeholder="$t('请输入')"
            confirm-type="done" :maxlength="240" placeholder-style="color:#999;font-size:28rpx" v-model="content" />
        </view>
        <button class='dongDetail_fd2_3_c1' @tap.stop="queryMessageFunc()">添加</button>
      </view>
    </benben-popup>
  </page-body>
</template>
<script>
  import amapFile from '@/libs/amap-wx.js';
  export default {
    components: {},


    data() {
      return {
        "mingcheng": "",
        "logo": "",
        province: '', //省
        city: '', //	市
        lat: '',
        lng: '',
        address: '', //地址
        productList: [], //业务
        serviceList: '', //业务
        jieshao: '',
        yewuList: [],
        isShow: false,
        content: '',
        images: [],
        imagesId: '',
        company_id: '',
        aid: '',
        user_id_2: '',
        id: '',
        myAmapFun: null,
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      this.company_id = options.company_id
      this.myAmapFun = new amapFile.AMapWX({
        key: '63259edc296cb943ffc26c92b77eba63'
      });
      if (this.company_id) {
        this.getDetail()
      }

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    mounted() {
      uni.$on('product', data => {
        if (data.name) {
          this.productList.push(data)
        }
        console.log('data', data)
      })
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      choosePop() {
        if (this.yewuList.length > 11) {
          this.$message.info('业务范围最多添加12个，请谨慎添加')
          return
        }
        this.isShow = true
      },
      chooseMap() {
        let _this = this
        console.log('_this_this_this_this_this')
        uni.chooseLocation({
          success: (resule) => {
            console.log(resule, '地图');
            _this.lng = resule.longitude
            _this.lat = resule.latitude
            _this.myAmapFun.getRegeo({
              location: resule.longitude + ',' + resule.latitude,
              success: (data) => {
                //成功回调
                let regeoData = data[0].regeocodeData.addressComponent;
                let city = regeoData.city.length ? regeoData.city : '';
                let location_city = regeoData.city.length ? regeoData.city : '';
                _this.province = regeoData.province;
                let location_province = regeoData.province;
                let location_district = regeoData.district;
                _this.city = location_city
                _this.address = location_city + location_province + location_district +
                  resule.name
                // _this.city = location_city + location_province + location_district +
                //   resule.name
              },
              fail: (info) => {
                //失败回调
                console.log('info111', info)
              }
            })
          },
          fail: (info) => {
            //失败回调
            console.log('info111', info)
          }
        })
      },
      getDetail() {
        this.$api.post(global.apiUrls.post6651b7b41cace, {
          aid: this.company_id,
          source: "center"
        }).then(res => {
          if (res.data.code == 1) {

            this.mingcheng = res.data.data.mingcheng
            this.qiyedianhua = res.data.data.qiyedianhua
            this.logo = res.data.data.logo
            this.address = res.data.data.address
            this.jieshao = res.data.data.jieshao
            this.images = res.data.data.images
            this.yewuList = res.data.data.serviceList.map(item => {
              return item.name
            })
            this.productList = res.data.data.productList.map(item => {
              const obj = {
                name: item.chanpinmingcheng,
                thumb: item.thumb,
                jieshao: item.jieshao
              }
              return obj
            })
            this.city = res.data.data.city
            this.province = res.data.data.province
            this.lat = res.data.data.lat
            this.lng = res.data.data.lng
            this.aid = res.data.data.aid
            this.user_id_2 = res.data.data.user_id_2
          }
        })
      },
      // 添加业务
      queryMessageFunc() {
        if (this.content) {
          this.yewuList.push(this.content)
          this.content = ''
          this.isShow = false
        }
      },
      delYewu(item, index) {
        this.yewuList.splice(index, 1)
      },
      delProduct(item, index) {
        this.productList.splice(index, 1)
      },
      submit() {
        if (!this.mingcheng) {
          this.$message.info('请输入名称')
          return;
        }
        if (!this.qiyedianhua) {
          this.$message.info('请输入企业电话')
          return;
        }
        if (!this.logo) {
          this.$message.info('请上传logo')
          return;
        }
        if (!this.address) {
          this.$message.info('请输入详细地址')
          return;
        }
        if (!this.jieshao) {
          this.$message.info('请输入企业介绍')
          return;
        }
        if (this.images.length == 0) {
          this.$message.info('请上传图片')
          return;
        }
        if (this.yewuList.length == 0) {
          this.$message.info('请输入业务范围')
          return;
        }
        if (this.productList.length == 0) {
          this.$message.info('请上传产品')
          return;
        }
        let urldata = ''
        if (this.aid) {
          urldata = global.apiUrls.post6658352823dcc
        } else {
          urldata = global.apiUrls.post6658197e351f4
        }
        this.$api.dbPost(urldata, {
          aid: this.aid,
          user_id_2: this.user_id_2,
          mingcheng: this.mingcheng,
          logo: this.logo,
          province: this.province,
          city: this.city,
          lat: this.lat,
          lng: this.lng,
          address: this.address,
          jieshao: this.jieshao,
          serviceList: this.yewuList.join(','),
          productList: JSON.stringify(this.productList),
          images: this.images.join(','),
          qiyedianhua: this.qiyedianhua
        }).then(res => {
          if (res.data.code == 1) {
            setTimeout(result => {
              uni.navigateBack()
            }, 600)
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .dongDetail_fd2_3_c2_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c2 {
    color: var(--benbenFontColor2);
    margin: 0rpx 30rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c1 {
    background: var(--benbenbgColor2);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor3);
    width: 104rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c0_c1 {
    color: var(--benbenFontColor0);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    width: 100%;
  }

  .dongDetail_fd2_3_c0_c0 {
    width: 26rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 8rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c0 {
    background: #F8F8F8;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    padding: 16rpx 32rpx 16rpx 32rpx;
    margin: 0rpx 32rpx 0rpx 32rpx;
  }

  .dongDetail_fd2_3 {
    background: var(--benbenbgColor1);
    position: fixed;
    bottom: calc(0rpx + var(--window-bottom));
    left: 0rpx;
    width: 750rpx;
    padding: 24rpx 0rpx 40rpx 0rpx;
    background-size: 100% auto;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .qiyeInfo_flex_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .qiyeInfo_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .qiyeInfo_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .qiyeInfo_fd0_0_c0 {
    width: 120rpx;
  }

  .qiyeInfo_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .qiyeInfo_flex_1 {
    padding: 0rpx 0rpx 160rpx 0rpx;
  }

  .qiyeInfo_fd1_8 {
    background: #3DBC42;
    border-radius: 44rpx;
    width: 640rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    height: 88rpx;
    position: fixed;
    bottom: calc(40rpx + var(--window-bottom));
    left: 55rpx;
  }

  .qiyeInfo_fd1_7_c1_c1 {
    width: 34rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .qiyeInfo_fd1_7_c1_c0_c0 {
    width: 140rpx;
    height: 110rpx;
    border-radius: 16rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .qiyeInfo_fd1_7_c1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .qiyeInfo_fd1_6_c1_c0_c1 {
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    top: -6rpx;
    right: 0rpx;
  }

  .qiyeInfo_fd1_6_c1_c0 {
    background: rgba(240, 240, 240, 1);
    font-size: 28rpx;
    padding: 4rpx 6rpx 4rpx 6rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
    margin: 16rpx 16rpx 0rpx 0rpx;
    position: relative;
  }

  .qiyeInfo_fd1_6_c0_c1 {
    width: 46rpx;
    height: 46rpx;
  }

  .qiyeInfo_fd1_5_c11 {
    width: 164rpx;
    height: 127rpx;
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .qiyeInfo_fd1_5_c101 {
    width: 164rpx;
    height: 127rpx;
  }

  .qiyeInfo_fd1_5_c10 {
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .qiyeInfo_fd1_5_c1 {
    width: 686rpx;
    padding: 24rpx 0rpx 0rpx 24rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .qiyeInfo_fd1_4_c1 {
    background: #F8F9FD;
    width: 686rpx;
    border-radius: 10rpx;
    padding: 10rpx 10rpx 0rpx 16rpx;
    margin: 24rpx auto 0rpx auto;
  }

  .qiyeInfo_fd1_4 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
    margin: 0rpx auto 0rpx auto;
    width: 686rpx;
  }

  .qiyeInfo_numberfd1_3_c1_c0 {
    width: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .qiyeInfo_input_fd1_3_c1 {
    width: 100%;
    height: 140rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    white-space: pre-wrap;
  }

  .qiyeInfo_fd1_3_c1 {
    background: #F8F9FD;
    width: 686rpx;
    border-radius: 10rpx;
    margin: 24rpx auto 0rpx auto;
    padding: 16rpx;
  }

  .qiyeInfo_fd1_2_c1_c1 {
    font-size: 22rpx;
  }

  .qiyeInfo_fd1_2_c1 {
    color: var(--benbenFontColor1);
  }

  .qiyeInfo_fd1_1_c1_image {
    width: 167rpx;
    height: 127rpx;
  }

  .qiyeInfo_fd1_1_c1_icon {
    top: 0rpx;
    right: 0rpx;
    z-index: 10;
    color: #ff5536;
  }

  .qiyeInfo_fd1_0_c1 {
    text-align: right;
  }

  .qiyeInfo_fd1_0 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
    width: 686rpx;
    margin: 0rpx auto 0rpx auto;
  }
</style>
